<template>
    <div class="systemManage">
        <div class="sidebar">
            <el-menu default-active="1-4-1" @open="handleOpen" @close="handleClose" background-color="#456BEA"
                text-color="#fff" unique-opened active-text-color="#fff">
                <el-submenu index="1">
                    <template slot="title">
                        <!-- <svg-icon iconClass=true src="./svg/app.svg" /> -->
                        <svg class="sidebarsvg" width="14" height="14" fill="#fff" xmlns="http://www.w3.org/2000/svg"
                            viewBox="0 0 15.54 15.54">
                            <path class="cls-1"
                                d="M921.22,427.86H919a2.73,2.73,0,0,1-2.73-2.73v-3.36a1.62,1.62,0,0,1,1.61-1.62h3.36a2.74,2.74,0,0,1,2.74,2.74v2.24A2.74,2.74,0,0,1,921.22,427.86Zm-3.36-6.71a.61.61,0,0,0-.61.62v3.36a1.73,1.73,0,0,0,1.73,1.73h2.24a1.74,1.74,0,0,0,1.74-1.73v-2.24a1.74,1.74,0,0,0-1.74-1.74Zm-4.47,6.71h-2.24a2.73,2.73,0,0,1-2.73-2.73v-2.24a2.74,2.74,0,0,1,2.73-2.74h3.36a1.63,1.63,0,0,1,1.62,1.62v3.36A2.74,2.74,0,0,1,913.39,427.86Zm-2.24-6.71a1.74,1.74,0,0,0-1.73,1.74v2.24a1.74,1.74,0,0,0,1.73,1.73h2.24a1.74,1.74,0,0,0,1.74-1.73v-3.36a.62.62,0,0,0-.62-.62ZM921.22,420h-3.36a1.61,1.61,0,0,1-1.61-1.62v-3.35a2.74,2.74,0,0,1,2.73-2.74h2.24a2.74,2.74,0,0,1,2.74,2.74v2.24A2.74,2.74,0,0,1,921.22,420ZM919,413.32a1.73,1.73,0,0,0-1.73,1.74v3.35a.61.61,0,0,0,.61.62h3.36A1.74,1.74,0,0,0,923,417.3v-2.24a1.74,1.74,0,0,0-1.74-1.74ZM914.51,420h-3.36a2.73,2.73,0,0,1-2.73-2.73v-2.24a2.74,2.74,0,0,1,2.73-2.74h2.24a2.74,2.74,0,0,1,2.74,2.74v3.35A1.62,1.62,0,0,1,914.51,420Zm-3.36-6.71a1.74,1.74,0,0,0-1.73,1.74v2.24a1.74,1.74,0,0,0,1.73,1.73h3.36a.62.62,0,0,0,.62-.62v-3.35a1.74,1.74,0,0,0-1.74-1.74Z"
                                transform="translate(-908.42 -412.32)" />
                        </svg>
                        <span slot="title">安全管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="1-1">
                            <router-link to="/"> 数据管理</router-link>
                        </el-menu-item>
                        <el-menu-item index="1-2">
                            <router-link to="/systemManage/alarmWay"> 报警方式</router-link>
                        </el-menu-item>
                        <el-menu-item index="1-2">
                            <router-link to="/systemManage/threshold"> 报警阈值</router-link>
                        </el-menu-item>
                    </el-menu-item-group>
                </el-submenu>

                <el-submenu index="2">
                    <template slot="title">
                        <!-- <svg-icon iconClass=true src="./svg/app.svg" /> -->
                        <svg class="sidebarsvg" width="14" height="14" fill="#fff" xmlns="http://www.w3.org/2000/svg"
                            viewBox="0 0 15.54 15.54">
                            <path class="cls-1"
                                d="M921.22,427.86H919a2.73,2.73,0,0,1-2.73-2.73v-3.36a1.62,1.62,0,0,1,1.61-1.62h3.36a2.74,2.74,0,0,1,2.74,2.74v2.24A2.74,2.74,0,0,1,921.22,427.86Zm-3.36-6.71a.61.61,0,0,0-.61.62v3.36a1.73,1.73,0,0,0,1.73,1.73h2.24a1.74,1.74,0,0,0,1.74-1.73v-2.24a1.74,1.74,0,0,0-1.74-1.74Zm-4.47,6.71h-2.24a2.73,2.73,0,0,1-2.73-2.73v-2.24a2.74,2.74,0,0,1,2.73-2.74h3.36a1.63,1.63,0,0,1,1.62,1.62v3.36A2.74,2.74,0,0,1,913.39,427.86Zm-2.24-6.71a1.74,1.74,0,0,0-1.73,1.74v2.24a1.74,1.74,0,0,0,1.73,1.73h2.24a1.74,1.74,0,0,0,1.74-1.73v-3.36a.62.62,0,0,0-.62-.62ZM921.22,420h-3.36a1.61,1.61,0,0,1-1.61-1.62v-3.35a2.74,2.74,0,0,1,2.73-2.74h2.24a2.74,2.74,0,0,1,2.74,2.74v2.24A2.74,2.74,0,0,1,921.22,420ZM919,413.32a1.73,1.73,0,0,0-1.73,1.74v3.35a.61.61,0,0,0,.61.62h3.36A1.74,1.74,0,0,0,923,417.3v-2.24a1.74,1.74,0,0,0-1.74-1.74ZM914.51,420h-3.36a2.73,2.73,0,0,1-2.73-2.73v-2.24a2.74,2.74,0,0,1,2.73-2.74h2.24a2.74,2.74,0,0,1,2.74,2.74v3.35A1.62,1.62,0,0,1,914.51,420Zm-3.36-6.71a1.74,1.74,0,0,0-1.73,1.74v2.24a1.74,1.74,0,0,0,1.73,1.73h3.36a.62.62,0,0,0,.62-.62v-3.35a1.74,1.74,0,0,0-1.74-1.74Z"
                                transform="translate(-908.42 -412.32)" />
                        </svg>
                        <span slot="title">权限管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="1-1">
                            <router-link to="/systemManage/foreground"> 前台管理</router-link>
                        </el-menu-item>
                        <el-menu-item index="1-2">
                            <router-link to="/systemManage/backstage"> 后台管理</router-link>
                        </el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="3">
                    <template slot="title">
                        <!-- <svg-icon iconClass=true src="./svg/app.svg" /> -->
                        <svg class="sidebarsvg" width="14" height="14" fill="#fff" xmlns="http://www.w3.org/2000/svg"
                            viewBox="0 0 15.54 15.54">
                            <path class="cls-1"
                                d="M921.22,427.86H919a2.73,2.73,0,0,1-2.73-2.73v-3.36a1.62,1.62,0,0,1,1.61-1.62h3.36a2.74,2.74,0,0,1,2.74,2.74v2.24A2.74,2.74,0,0,1,921.22,427.86Zm-3.36-6.71a.61.61,0,0,0-.61.62v3.36a1.73,1.73,0,0,0,1.73,1.73h2.24a1.74,1.74,0,0,0,1.74-1.73v-2.24a1.74,1.74,0,0,0-1.74-1.74Zm-4.47,6.71h-2.24a2.73,2.73,0,0,1-2.73-2.73v-2.24a2.74,2.74,0,0,1,2.73-2.74h3.36a1.63,1.63,0,0,1,1.62,1.62v3.36A2.74,2.74,0,0,1,913.39,427.86Zm-2.24-6.71a1.74,1.74,0,0,0-1.73,1.74v2.24a1.74,1.74,0,0,0,1.73,1.73h2.24a1.74,1.74,0,0,0,1.74-1.73v-3.36a.62.62,0,0,0-.62-.62ZM921.22,420h-3.36a1.61,1.61,0,0,1-1.61-1.62v-3.35a2.74,2.74,0,0,1,2.73-2.74h2.24a2.74,2.74,0,0,1,2.74,2.74v2.24A2.74,2.74,0,0,1,921.22,420ZM919,413.32a1.73,1.73,0,0,0-1.73,1.74v3.35a.61.61,0,0,0,.61.62h3.36A1.74,1.74,0,0,0,923,417.3v-2.24a1.74,1.74,0,0,0-1.74-1.74ZM914.51,420h-3.36a2.73,2.73,0,0,1-2.73-2.73v-2.24a2.74,2.74,0,0,1,2.73-2.74h2.24a2.74,2.74,0,0,1,2.74,2.74v3.35A1.62,1.62,0,0,1,914.51,420Zm-3.36-6.71a1.74,1.74,0,0,0-1.73,1.74v2.24a1.74,1.74,0,0,0,1.73,1.73h3.36a.62.62,0,0,0,.62-.62v-3.35a1.74,1.74,0,0,0-1.74-1.74Z"
                                transform="translate(-908.42 -412.32)" />
                        </svg>
                        <span slot="title">字典配置</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="1-1">
                            <router-link to="/systemManage/power"> 动力字典</router-link>

                        </el-menu-item>
                        <el-menu-item index="1-2">
                            <router-link to="/systemManage/end"> 末端字典</router-link>
                        </el-menu-item>
                    </el-menu-item-group>
                </el-submenu>

                <el-menu-item index="4">
                    <svg class="sidebarsvg" width="14" height="14" fill="#fff" xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 15.54 15.54">
                        <path class="cls-1"
                            d="M921.22,427.86H919a2.73,2.73,0,0,1-2.73-2.73v-3.36a1.62,1.62,0,0,1,1.61-1.62h3.36a2.74,2.74,0,0,1,2.74,2.74v2.24A2.74,2.74,0,0,1,921.22,427.86Zm-3.36-6.71a.61.61,0,0,0-.61.62v3.36a1.73,1.73,0,0,0,1.73,1.73h2.24a1.74,1.74,0,0,0,1.74-1.73v-2.24a1.74,1.74,0,0,0-1.74-1.74Zm-4.47,6.71h-2.24a2.73,2.73,0,0,1-2.73-2.73v-2.24a2.74,2.74,0,0,1,2.73-2.74h3.36a1.63,1.63,0,0,1,1.62,1.62v3.36A2.74,2.74,0,0,1,913.39,427.86Zm-2.24-6.71a1.74,1.74,0,0,0-1.73,1.74v2.24a1.74,1.74,0,0,0,1.73,1.73h2.24a1.74,1.74,0,0,0,1.74-1.73v-3.36a.62.62,0,0,0-.62-.62ZM921.22,420h-3.36a1.61,1.61,0,0,1-1.61-1.62v-3.35a2.74,2.74,0,0,1,2.73-2.74h2.24a2.74,2.74,0,0,1,2.74,2.74v2.24A2.74,2.74,0,0,1,921.22,420ZM919,413.32a1.73,1.73,0,0,0-1.73,1.74v3.35a.61.61,0,0,0,.61.62h3.36A1.74,1.74,0,0,0,923,417.3v-2.24a1.74,1.74,0,0,0-1.74-1.74ZM914.51,420h-3.36a2.73,2.73,0,0,1-2.73-2.73v-2.24a2.74,2.74,0,0,1,2.73-2.74h2.24a2.74,2.74,0,0,1,2.74,2.74v3.35A1.62,1.62,0,0,1,914.51,420Zm-3.36-6.71a1.74,1.74,0,0,0-1.73,1.74v2.24a1.74,1.74,0,0,0,1.73,1.73h3.36a.62.62,0,0,0,.62-.62v-3.35a1.74,1.74,0,0,0-1.74-1.74Z"
                            transform="translate(-908.42 -412.32)" />
                    </svg>
                    <span slot="title">
                         <router-link to="/systemManage/app"> APP配置</router-link>
                    </span>
                </el-menu-item>
            </el-menu>
            <!-- <el-radio-group v-model="isCollapse">
            <el-radio-button :label="false">展开</el-radio-button>
            <el-radio-button :label="true">收起</el-radio-button>
        </el-radio-group> -->
            <Hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar"></Hamburger>
        </div>
        <div class="sm">
            <router-view></router-view>
        </div>
    </div>
</template>
<script>
import { mapGetters } from 'vuex'
import Hamburger from '@/components/Hamburger'
export default {
    name: 'SystemManage',
    data() {
        return {
            isCollapse: true
        };
    },
    components: { Hamburger },
    computed: {
        ...mapGetters([
            'sidebar'
        ]),
    },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        toggleSideBar() {
            this.$store.dispatch('app/toggleSideBar')
        }
    }
}
</script>

<style lang="scss">
.sm{
    width: calc(100% - 220px);
}
.el-submenu__title i {
    color: #fff;
}
</style>
<style lang="scss" scoped>
.systemManage {
    width: 100%;
    height: 100%;
    display: flex;
}

.sidebar {
    width: 220px;
    height: 100%;
    background-color: #456BEA;

    .sidebarsvg {
        margin: 0 10px 0 4px;
    }
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 100%;
}
</style>
  